<template>
    <div class="question">
        <Header style="z-index:1025">
            <header-menu :index="'6-1'"></header-menu>
        </Header>
        <top-search :navlist="NavTitle" :height="15"></top-search>
        <div class="swiper">
            <Carousel autoplay loop>
                <CarouselItem>
                    <div class="carousel">
                        <img src="../../assets/banner.png" alt="">
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel">
                        <img src="../../assets/banner.png" alt="">
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel">
                        <img src="../../assets/banner.png" alt="">
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel">
                        <img src="../../assets/banner.png" alt="">
                    </div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel">
                        <img src="../../assets/banner.png" alt="">
                    </div>
                </CarouselItem>
            </Carousel>
        </div>
        <div class="container clearfix">
            <div class="right clearfix">
                <div class="search clearfix">
                    <span>全部问题</span>
                    <div class="clearfix">
                        <span>5555</span>
                        <span>个问题得到解答</span>
                        <span>我要提问</span>
                    </div>
                    <div>
                        <Input placeholder="请输入问题关键字" style="width: auto">
                        <Icon type="ios-search" slot="suffix" />
                        </Input>
                    </div>

                </div>
                <div class="list-title clearfix">
                    <ul>
                        <li>
                            <img src="../../assets/commodity/yan.png" alt="">
                            <p>眼</p>
                        </li>
                        <li>
                            <img src="../../assets/commodity/yan.png" alt="">
                            <p>眼</p>
                        </li>
                        <li>
                            <img src="../../assets/commodity/yan.png" alt="">
                            <p>眼</p>
                        </li>
                        <li>
                            <img src="../../assets/commodity/yan.png" alt="">
                            <p>眼</p>
                        </li>
                        <li>
                            <img src="../../assets/commodity/yan.png" alt="">
                            <p>眼</p>
                        </li>
                        <li>
                            <img src="../../assets/commodity/yan.png" alt="">
                            <p>眼</p>
                        </li>
                        <li>
                            <img src="../../assets/commodity/yan.png" alt="">
                            <p>眼</p>
                        </li>
                        <li>
                            <img src="../../assets/commodity/yan.png" alt="">
                            <p>眼</p>
                        </li>

                    </ul>
                </div>
                <div class="content">
                    <Tabs value="name1">
                        <TabPane label="最新问题" name="name1"><problem ></problem></TabPane>
                        <TabPane label="热门问题" name="name2"><problem ></problem></TabPane>
                        <TabPane label="待解决问题" name="name3"><problem ></problem></TabPane>
                    </Tabs>
                </div>
            </div>
            <div class="left">
                <side-list :list="sidelist"></side-list>
                <Tabs value="name1">
                    <TabPane label="好评医生榜" name="name1">
                        <good-doctor></good-doctor>
                    </TabPane>
                    <TabPane label="热心医生榜" name="name2">
                        <good-doctor></good-doctor>
                    </TabPane>
                    <Button size="small" slot="extra">更多>></Button>
                </Tabs>
            </div>
        </div>
        <div class="container">
            <product-Nav :navList="i" v-for="(i, k) in navList" :key="k" :width="270"></product-Nav>

        </div>
        <bottom-icon></bottom-icon>
        <Footer>
            <page-footer></page-footer>
        </Footer>
    </div>
</template>

<script>
    import HeaderMenu from '../../components/Header/'
    import PageFooter from '../../components/Footer/'
    import BottomIcon from '../../components/BottomIcon/'
    import TopSearch from '../../components/TopSearch/'
    import userNav from '../../components/Usertop/userNav'
    import Problem from '../../components/Problem/index'
    import SideList from "../../components/SideMenu/SideList"
    import productNav from "../../components/ProductNav/"
    import GoodDoctor from "../../components/ListItem/GoodDoctor"
    export default {
        name: "index",
        components:{
            HeaderMenu,
            PageFooter,
            BottomIcon,
            TopSearch,
            userNav,
            Problem,
            SideList,
            productNav,
            GoodDoctor
        },
        data () {
            return {
                NavTitle:{
                    id:1,
                    name:'整形问答',
                    mytext:'我的提问',
                    type:2
                },
                sidelist: [
                    {
                        id: 1,
                        name: '推荐医生',
                        doctor:1,
                        child: [
                            {
                                doctor:'周一围',
                                physician:'主治医生',
                                department:'粉红宝宝医疗美容门诊部',
                                good :'脸部、鼻部、面部轮廓',
                                img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'
                            },
                            {
                                doctor:'周一围',
                                physician:'主治医生',
                                department:'粉红宝宝医疗美容门诊部',
                                good :'脸部、鼻部、面部轮廓',
                                img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'
                            },
                            {
                                doctor:'周一围',
                                physician:'主治医生',
                                department:'粉红宝宝医疗美容门诊部',
                                good :'脸部、鼻部、面部轮廓',
                                img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'
                            },
                            {
                                doctor:'周一围',
                                physician:'主治医生',
                                department:'粉红宝宝医疗美容门诊部',
                                good :'脸部、鼻部、面部轮廓',
                                img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'
                            },
                        ]
                    },
                    {
                        id: 2,
                        name: '竞价排名',
                        child: [
                            {id: 1,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 2,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 3,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 4,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                    {
                        id: 3,
                        name: '大家正在预约',
                        child: [
                            {id: 21,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 22,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 23,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 24,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                    {
                        id: 4,
                        name: '新品推荐',
                        child: [
                            {id: 21,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 22,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            {id: 23,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'},
                            // {id: 24,title: '【每月限5个名额】高效便捷，量齿定制，改变脸型，功能与美学矫正二...',price: 7800, hot: 20, num: 10, discount: 7.5,img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'}
                        ]
                    },
                ],
                navList: [
                    {id: 2, title: '医生团队',type:2,
                        child:[
                            {
                                doctor:'周一围',
                                physician:'主治医生',
                                department:'粉红宝宝医疗美容门诊部',
                                good :'脸部、鼻部、面部轮廓',
                                img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'
                            },
                            {
                                doctor:'周一围',
                                physician:'主治医生',
                                department:'粉红宝宝医疗美容门诊部',
                                good :'脸部、鼻部、面部轮廓',
                                img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'
                            },
                            {
                                doctor:'周一围',
                                physician:'主治医生',
                                department:'粉红宝宝医疗美容门诊部',
                                good :'脸部、鼻部、面部轮廓',
                                img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'
                            },
                            {
                                doctor:'周一围',
                                physician:'主治医生',
                                department:'粉红宝宝医疗美容门诊部',
                                good :'脸部、鼻部、面部轮廓',
                                img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'
                            },
                        ]
                    },
                ],
            }
        }
    }
</script>

<style  lang="less">
    @import "../../style/style";
    .question{
        >.container{
            >.right{
                width: 840px;
                float: left;
                padding-top: 20px;
                >.search{
                    height: 36px;
                    line-height: 36px;
                    >span{
                        float: left;
                        color: #333333;
                        font-size: 20px;
                        font-weight: bold;
                        margin-right: 30px;
                    }
                    >:nth-child(2){
                        float: left;
                        height: 36px;
                        line-height: 36px;
                        /*margin-top: -6px;*/
                        >:first-child{
                            font-size: 30px;
                        }
                        span{
                            color: @theme-color-dark;
                            font-size: 22px;
                            margin-right: 10px;
                            font-weight: normal;
                            margin-top: -2px;
                            display: block;
                            float: left;
                        }
                        >:last-child{
                            color: white;
                            background-color: @theme-color-dark;
                            padding: 3px 18px;
                            border-radius: 4px;
                            font-size: 20px;
                            margin-left: 15px;
                            margin-top: -4px;
                        }
                    }
                    >:last-child{
                        float: right;
                    }
                }
                .list-title{
                    margin-top: 30px;
                    margin-bottom: 30px;
                    ul{
                        li{
                            padding-top: 10px;
                            width: 60px;
                            text-align: center;
                            color: #999999;
                            font-size: 12px;
                            float: left;
                            border-left: dashed 1px #e0e0e0;
                        }
                        >:last-child{
                            border-right: dashed 1px #e0e0e0;
                        }
                    }
                }
                .content{
                    .ivu-tabs-nav .ivu-tabs-tab{
                        font-size: 20px;
                    }
                }
            }
            >.left{
                padding-top: 20px;
                width: 260px;
                float: right;
                .ivu-tabs-nav .ivu-tabs-tab{
                    padding: 7px 7px;
                }
                .ivu-tabs-ink-bar{
                    width: 87px;
                }
                .ivu-tabs-nav-right{
                    margin-top: 7px;
                        span{
                            color: @theme-color-dark;
                        }
                    }
                    .ivu-btn{
                        border: none;
                    }
            }
        }

    }
</style>